<template>
    <div class="wrapper">
        <van-nav-bar fixed title="提交订单" left-arrow @click-left="$utils.back($route.path);"></van-nav-bar>
        <div class="has-top has-bottom-other">
            <div class="order-box w-100 plr-24 ptb-38 pos-r">
                <div class="order-bg w-100 pos-a top-0 left-0 right-0"></div>
                <!-- 房间信息 -->
                <div class="bg-white pt-22 plr-24 pb-40 flex pos-r br-12">
                    <img-box class="is-200 br-12 flex-s-0" :img-url="orderData.imgList[0]" />
                    <div class="flex-1 ml-26 ofh flex flex-d-c flex-s-fs">
                        <div>
                            <div class="fs-32 text-show-line-1 lh-44 color-dark mb-12">
                                {{orderData.ProductModel.ProductInfo.ProductName}}
                            </div>
                            <div class="flex fs-24 lh-34 color-gray-light">
                                <span class="tag pr-20 pos-r"
                                    v-for="(item, index) in orderData.ProductModel.ProductInfo.TagsList" :key="index"
                                    v-if="orderData.ProductModel.ProductInfo.TagsList && index < 3">{{item.Name}}</span>
                            </div>
                            <div class="color-primary mt-16 lh-34" v-if="ProductRoomList.length != 0">
                                <svg-icon icon-class="finish" class="fs-28 color-primary mr-8" />
                                {{ProductRoomList[0].Remark}}
                            </div>
                        </div>
                        <div class="color-deep lh-xxs flex flex-s-fe mt-12">
                            <div class="fs-32 ls-4">¥<span
                                    class="fs-44 ls-0">{{orderData.ProductModel.ProductInfo.V_GradePrice}}</span>/{{orderData.ProductModel.ProductInfo.Unit}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 表单 -->
                <div class="bg-white pos-r br-16 mt-22">
                    <div class="ptb-20 plr-24 flex flex-v-c bb-l">
                        <img :src="require('@/assets/images/teaHouse/houseIcon.png')" class="is-48">
                        <span
                            class="fs-28 color-dark lh-48 ml-8">{{ orderData.StoreInfo.Name }}（{{ orderData.StoreInfo.StreetName }}）</span>
                    </div>
                    <div class="plr-24">
                        <div class="flex flex-s-c ptb-22 bb-l" @click="showDate">
                            <div class="flex flex-v-c dvt ">
                                <div class="flex flex-d-c lh-22 color-gray">
                                    <div class="mb-6 fs-22">入住</div>
                                    <div class="fs-28 lh-42 color-dark">{{param.bookStartTime1}}<span
                                            class="color-gray-light fs-22">{{param.bookStartTime1 == this.$utils.today().startDate ? '今天' : param.bookStartTime1 == this.$utils.tomorrow().startDate ? '明天' : param.startWeek}}</span>
                                    </div>
                                </div>
                                <div class="">
                                    <span
                                        class="pos-r bd-solid border-primary color-primary br-20 plr-24 dis-inb mlr-36 fs-26 line">{{this.$utils.getDays(param.bookStartTime1,param.bookEndTime1)}}晚</span>
                                </div>
                                <div class="flex flex-d-c fs-22 lh-22 color-gray">
                                    <div class="mb-6">离店</div>
                                    <div class="fs-28 lh-42 color-dark mr-8 fs-22">{{param.bookEndTime1}}<span
                                            class="color-gray-light fs-22">{{param.bookEndTime1 == this.$utils.today().startDate ? '今天' : param.bookEndTime1 == this.$utils.tomorrow().startDate ? '明天' : param.endWeek}}</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <svg-icon icon-class="data" class="fs-28 color-dark" />
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r arrow lh-100" @click="showHouse">
                            <div class="fs-28 color-gray min-w">选择房间</div>
                            <div class="flex-1 fs-32 color-dark">
                                <span v-if="param.roomNo">{{param.roomNo}} {{param.roomName}}</span>
                                <span v-else>请选择房间</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white pos-r br-16 mt-22">
                    <div class="ptb-20 plr-24 flex flex-v-c bb-l">
                        <span class="fs-28 color-dark lh-48 ml-8">入住信息</span>
                    </div>
                    <div class="plr-24">
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userName.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.userName.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <input v-model="param.userName" type="text"
                                    :placeholder="obj.userName.required ? '请输入'+obj.userName.Name+'（必填）' : '请输入'+obj.userName.Name">
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userIdentityCard.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.userIdentityCard.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <input v-model="param.userIdentityCard" type="text"
                                    :placeholder="obj.userIdentityCard.required ? '请输入'+obj.userIdentityCard.Name+'（必填）' : '请输入'+obj.userIdentityCard.Name">
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userTel.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.userTel.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <input v-model="param.userTel" type="number"
                                    :placeholder="obj.userTel.required ? '请输入'+obj.userTel.Name+'（必填）' : '请输入'+obj.userTel.Name">
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.userCount.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.userCount.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <input v-model="param.userCount" type="number"
                                    :placeholder="obj.userCount.required ? '请输入'+obj.userCount.Name+'（必填）' : '请输入'+obj.userCount.Name">
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.estimateArrivalTime.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.estimateArrivalTime.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <span class="flex-1 fs-30"
                                    :class="param.estimateArrivalTime ? 'color-dark' : 'color-gray-light'"
                                    @click="param.timeSelect = true">{{param.estimateArrivalTime ? param.estimateArrivalTime : obj.estimateArrivalTime.required ? '请输入'+obj.estimateArrivalTime.Name+'（必填）' : '请输入'+obj.estimateArrivalTime.Name}}</span>
                                <van-popup v-model="param.timeSelect" position="bottom">
                                    <van-datetime-picker v-model="param.estimateArrivalTime" type="time"
                                        :min-hour="param.minHouse" :min-minute="param.minMinute"
                                        :title="param.bookStartTime1 + obj.estimateArrivalTime.Name"
                                        @change="changeSelect" @confirm="confirmTimeSelect"
                                        @cancel="cancelTimeSelect" />
                                </van-popup>
                            </div>
                        </div>
                        <div class="flex flex-v-c pos-r lh-100 bb-l" v-if="obj.orderRemark.isShow">
                            <div class="fs-28 color-gray min-w">{{obj.orderRemark.Name}}</div>
                            <div class="flex-1 fs-30 color-dark">
                                <input v-model="param.orderRemark" type="text"
                                    :placeholder="obj.orderRemark.required ? '请输入'+obj.orderRemark.Name+'（必填）' : '请输入'+obj.orderRemark.Name">
                            </div>
                        </div>
                    </div>
                </div>
								<div class="bg-white pos-r br-16 mt-22">
									<div class="ptb-20 plr-24 flex flex-v-c bb-l">
										<span class="fs-28 color-dark lh-48 ml-8">优惠信息</span>
									</div>
									<div class="bg-white pd-24 mg-24 br-16 travel fs-28" @click="openCouponList()">
										<div>优惠券</div>
										<div class="flex flex-v-c" v-if="userCouponList && userCouponList.length > 0">
											<div v-if="couponValue != 0">
												<span class="fs-28 color-primary1">-￥</span><span class="fs-36 color-primary1">{{ couponValue }}</span>
												<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goCoupon"/>
											</div>
											<div v-else>选择优惠券 <svg-icon icon-class="right" class="fs-24 ml-10" /></div>
										</div>
										<div v-else class="color-black2">暂无优惠券<svg-icon icon-class="right" class="fs-24 ml-10" /></div>						
									</div>
								</div>
                <div class="bg-white pos-r br-16 mt-22">
                    <div class="ptb-20 plr-24 flex flex-v-c bb-l">
                        <span class="fs-28 color-dark lh-48 ml-8">订单金额</span>
                    </div>
                    <div class="pd-24">
                        <div class="flex flex-s-c lh-48 fs-28 color-dark">
                            <span>商品金额</span>
                            <span>￥{{param.roomPrice ? param.roomPrice.toFixed(2) : ''}}</span>
                        </div>
                        <div class="flex flex-s-c lh-48 fs-28 color-dark" v-if="couponValue != 0 ">
													<span>优惠券</span>
													<span class="color-deep">-￥{{ couponValue }}</span>
												</div>
                        <div class="flex flex-fe-c lh-44 fs-32 color-dark fw-600 mt-24">
                            <span>订单总额：￥{{orderPrice ? orderPrice.toFixed(2) : "0"}}</span>
                        </div>
                    </div>
                </div>
                <div class="bg-white pos-r br-16 mt-22">
                    <div class="item pd-25">
                        <p class="fs-28 color-dark">买家留言(选填）</p>
                        <van-field v-model="param.userRemark" type="textarea" class="fs-24 mt-15" placeholder="请在此处填写留言~" />
                    </div>
                </div>
            </div>
            <div class="fixed-bottom">
                <div class="flex flex-fe-c ptb-20 plr-30 bg-white bottom-box">
                    <div class="flex flex-d-c mr-40">
                        <div class="fs-24 color-dark">
                            合计：<span
                                class="color-primary fs-40 fw-600">{{orderPrice ? orderPrice.toFixed(2) : '0'}}</span><span
                                class="color-primary fs-20 ml-6">元</span>
                        </div>
                        <span
                            class="flex-fe-c fs-24 color-gray-light lh-34 mt-4">{{param.roomAll.length}}间{{this.$utils.getDays(param.bookStartTime1,param.bookEndTime1)}}晚</span>
                    </div>
                    <button class="bg-primary color-white btn fs-32 lh-80 br-45" @click.stop="submitOrder">提交订单</button>
                </div>
            </div>
        </div>
        <!-- 选择房间弹窗 -->
        <van-action-sheet v-model="isShowHouse">
            <div class="pd-22 pr-20">
                <h6 class="fs-32 color-dark lh-44 pb-24 pt-16">选择房间</h6>
                <p class="fs-24 color-gray-light lh-34 mb-32">请选择您要预定的房间</p>
                <div class="flex flex-wrap">
                    <div class="bg-ffgray plr-36 fs-24 color-black lh-70 mr-14 mb-12 br-8 "
                        :class="item.flag ? 'active bd-solid border-primary' : ''"
                        v-for="(item,index) in ProductRoomList" @click="roomChange(item)">
                        <span :class="item.flag ? 'color-primary' : ''">{{item.RoomNo}} {{item.Name}}</span>
                    </div>
                </div>
            </div>
        </van-action-sheet>
        <!-- 选择时间弹窗 -->
        <van-calendar v-model="isShowDate" type="range" title="选择日期" ref="calendar" :show-mark="false" :show-close="false"
            :formatter="formatter" :min-date="minDate" :max-date="maxDate" :color="color" row-height="54"
            @select="selectDate" @close="cancleDate">
            <div class="ptb-20 plr-40" slot="footer">
                <div class="flex flex-sa-c dvt mb-16">
                    <div class="flex flex-d-c">
                        <span class="color-gray-light fs-22">入住</span>
                        <span class="fs-30 color-dark lh-42 mt-6">{{param.bookStartTime1}}
                            {{param.bookStartTime1 == this.$utils.today().startDate ? '今天' : param.bookStartTime1 == this.$utils.tomorrow().startDate ? '明天' : param.startWeek}}</span>
                    </div>
                    <div class="">
                        <span class="pos-r bd-solid border-primary color-primary br-20 plr-24 dis-inb mlr-36 fs-26 line">{{this.$utils.getDays(param.bookStartTime1,param.bookEndTime1)}}晚</span>
                    </div>
                    <div class="flex flex-d-c">
                        <span class="color-gray-light fs-22">离店</span>
                        <span class="fs-30 color-dark lh-42 mt-6"> {{param.bookEndTime1}}
                            {{param.bookEndTime1 == this.$utils.today().startDate ? '今天' : param.bookEndTime1 == this.$utils.tomorrow().startDate ? '明天' : param.endWeek}}</span>
                    </div>
                </div>
                <button class="bg-primary color-white fs-32 lh-80 br-44 full-width" @click="resetDate">立即预约</button>
            </div>
        </van-calendar>
				<!-- 优惠券弹窗 -->
				<van-popup  v-model="showCoupon" position="bottom">
					<div class="coupon-box">
						<h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
							<van-radio-group v-model="userCouponListRadio">
								<ul class="coupon-list mg-30 mb-0">
									<li
										v-for="(item, index) in userCouponList"
										:key="index"
										class="coupon-item mb-30 flex-s-c"
										@click="userCouponListRadio = index"
									>
										<div class="item flex-s-c flex-1 br-12" :style="{backgroundImage:'url('+require('@/assets/images/physio/coupon-li-bg.png')+')'}">
											<div class="left-box  fs-72   flex-center ">
												<div v-show="item.V_PrivilegeWay!==0" class="tac">
													<span>{{ parseInt(item.CouponPrivilegeValue) }}</span>
													<span v-show="item.CouponPrivilegeValue%1" class="fs-24">{{ item.CouponPrivilegeValue ? item.CouponPrivilegeValue.toFixed(2) : ''}}</span>
													<span class="fs-24">元</span>
													<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ? item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
												</div>
												<div v-show="item.V_PrivilegeWay===0" class="tac">
													<span>{{ parseInt(item.CouponPrivilegeValue/10) }}</span>
													<span v-show="(item.CouponPrivilegeValue/10)%1" class="fs-24">.{{ item.CouponPrivilegeValue/10 }}</span>
													<span class="fs-24">折</span>
													<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ? item.V_OrderPrice.toFixed(2) : ''}}元使用</p>
												</div>
											</div>
											<div class="right-box flex-s-c flex-1 pl-30 pr-20 pos-r">
												<div>
													<p class="fs-32 color-dark lh text-show-line-1 mb-10">{{ item.V_Name }}</p>
													<!--<p v-show="item.V_LimitMode === 0" class="fs-32 color-gray-light">全场通用</p>-->
													<!--<p v-show="item.V_ProductCategoryIds||item.V_ProductIds||item.V_StoreIds" class="fs-32 color-gray-light">{{ item.StoreNames }}{{ item.StoreNames?',':'' }}{{ item.ProductNames||item.ProductCategoryNames }}</p>-->
													<p
														class="fs-24 color-gray-light"
													>{{ item.V_UseStartTime }}至{{ item.V_UseEndTime }}</p>
												</div>
												<van-radio checked-color="#24c373"  :name="index" class="pr-20 flex-s-0" />
											</div>
										</div>
									</li>
								</ul>
							</van-radio-group>
							
						<div class="pd-24 flex-center">
							<van-button	class="color-primary1 bg-white flex-1 br-44 mr-20"	native-type="submit"	@click="noUseCoupon">不使用优惠券</van-button>
							<van-button		class="solid-btn flex-2 br-44 ml-20"	native-type="submit"	@click="choseCoupon">确定</van-button>
						</div>
					</div>
				</van-popup>
    </div>
</template>

<script>
    import imgBox from 'components/imgBox'
    import {
        GetProductBookData,
        GetCanBookRoomList,
        SubmitBookOrder,
        GetOrderBookInfo
    } from 'api/teaHouse'		
		import { GetProductDataBySubmit} from 'api/product'
		import { AddOrEditUserTempCarList } from 'api/member'
    export default {
        components: {
            imgBox
        },
        data() {
            return {
                isEdit: false, // 是否编辑
                param: {
                    orderId: '', // 订单ID
                    type: '', // 0-再次预定;1-续单
                    userCarListInput: {
                        list: []
                    }, // 购物车数据
                    storeId: '', // 门店ID
                    productId: '', // 商品ID
                    roomNo: '', // 选中房间号
                    roomName: '', // 选中房间名
                    roomId: '', // 选中房间ID
                    roomAll: [], // 总房间数
                    SaleType: -1, // 售卖方式
                    bookStartTime1: this.$utils.today().startDate, // 默认最小入住时间显示用(由于传参需要加时分秒所以直接用参数上传过程会显示null)
                    bookEndTime1: this.$utils.tomorrow().startDate, // 默认最小离店时间显示用(由于传参需要加时分秒所以直接用参数上传过程会显示null)
                    bookStartTime: '', // 入住时间传参用
                    bookEndTime: '', // 离店时间传参用
                    startWeek: '', // 入职周期界面显示
                    endWeek: '', // 离店周期界面显示
                    roomPrice: '', // 商品金额即房间金额
                    orderPrice: '', // 订单金额
                    userName: '', // 姓名
                    userIdentityCard: '', // 身份证
                    userTel: '', // 电话
                    userCount: '', // 登记人数
                    timeSelect: false, // 预计到店时间弹窗显示与否
                    minHouse: '12', // 最早可办理入住时间几时(按每天12:00)
                    minMinute: '', // 最早可办理入住时间几分
                    today: '', // 判断是否是今天(判断预定订单是否今天)
                    isAheadTime: false, // 判断是否是今天下午超过12点预定订单
                    estimateArrivalTime: '', // 预计到店时间
                    orderRemark: '', // 入住信息留言
                    userRemark: '', // 订单留言
										bookStoreId: 0,
                },
                orderData: { // 订单数据
                    ProductBookSetting: {}, // 预定配置
                    ProductModel: { // 商品信息
                        ProductInfo: {},
                    },
                    StoreInfo: {}, // 门店信息
                    imgList: [] // 所有商品图
                },
                ProductRoomList: [{ // 房间数据
                    Remark: ''
                }],
                isShowHouse: false, // 选择房间显示
                currentRoom: -1, // 当前选中房间
                isShowDate: false, // 选择时间显示
                color: '#16AD56',
                maxDate: new Date(), // 可选最大时间限制
                minDate: new Date(), // 可选最小时间限制
                BookInfoTypesList: [{ // 入住信息配置用于显示哪些填和必填
                    ID: 1,
                    Name: '姓名',
                    type: 'userName',
                    userName: '',
                    isShow: false,
                    required: false
                }, {
                    ID: 2,
                    Name: '手机号',
                    type: 'userTel',
                    userTel: '',
                    isShow: false,
                    required: false
                }, {
                    ID: 3,
                    Name: '身份证',
                    type: 'userIdentityCard',
                    userIdentityCard: '',
                    isShow: false,
                    required: false
                }, {
                    ID: 4,
                    Name: '人数',
                    type: 'userCount',
                    userCount: '',
                    isShow: false,
                    required: false
                }, {
                    ID: 5,
                    Name: '预计时间到店',
                    type: 'estimateArrivalTime',
                    estimateArrivalTime: '',
                    isShow: false,
                    required: false
                }, {
                    ID: 6,
                    Name: '备注',
                    type: 'orderRemark',
                    orderRemark: '',
                    isShow: false, // 可填信息
                    required: false // 必填信息
                }],
                obj: { // 各个可填信息对象
                    estimateArrivalTime: {},
                    orderRemark: {},
                    userCount: {},
                    userIdentityCard: {},
                    userName: {},
                    userTel: {},
                },
                rzInfo: {}, // 获取续单
								showCoupon: false,
								couponValue: 0,
								userCouponList: [],
								userCouponListRadio: 0,
								CouponPrivilegeValue: '',
            }
        },
        created() {
            // 门店ID
            this.param.storeId = this.$route.query.storeId
            // 商品ID
            this.param.productId = this.$route.query.productId
						this.param.bookStoreId = this.$route.query.bookStoreId
            // orderId是续单或再次预定需要获取入住信息用
            this.param.orderId = this.$route.query.orderId ? this.$route.query.orderId : 0
            // type 区分续单或再次预定
            this.param.type = this.$route.query.type ? this.$route.query.type : ''
            // 获取订单数据
            this.GetProductBookData()
        },
				computed: {
					orderPrice(){
						let _totalPay =  this.param.roomPrice  - this.couponValue
						return _totalPay
					},
				},
        mounted() {
				
        },
        methods: {
            // 获取订单数据
            GetProductBookData() {
                const _this = this
                GetProductBookData({
                    productId: _this.param.productId,
                    storeId: _this.param.storeId,
                }).then(res => {
                    if (res.State) {
												if(res.Data.ProductBookSetting.SaleType === 1){
													this.$router.push({
														path: '/teaOrderSubmit',
														query: {
																storeId: _this.param.storeId,
																productId: _this.param.productId
														}
													})
												}
                        _this.orderData = res.Data
                        _this.maxDate = new Date(res.Data.ProductBookSetting.Latest.split(' ')[0]) // 离店时间最大限制
                        _this.orderData.imgList = res.Data.ProductModel.ProductInfo.ImageUrl.split(',') // 商品图片
                        _this.param.roomPrice = parseFloat(res.Data.ProductModel.ProductInfo.V_GradePrice *
                            _this.$utils.getDays(_this.param.bookStartTime1, _this.param.bookEndTime1)
                        ) // 商品金额即房间金额
                        _this.param.orderPrice = parseFloat(res.Data.ProductModel.ProductInfo.V_GradePrice *
                            _this.$utils.getDays(_this.param.bookStartTime1, _this.param.bookEndTime1)
                        ) // 订单金额
                        _this.param.SaleType = res.Data.ProductBookSetting.SaleType // 时间类型(按天-按小时)
                        // 判断预定到店时间(可以办理入住时间)最早可以是几时几分(非当天根据12点往前推提前时间;当天且当前时间小于可以办理入住时间)
                        _this.param.today = _this.$utils.dateFomat('yyyy-mm-dd HH:MM:SS', new Date()).split(' ')
                        if (_this.param.today[0] != _this.param.bookStartTime1 || (_this.$utils.countDown(_this
                                    .param.today[1]) < _this.$utils.countDown('12:00:00') && _this.$utils
                                .countDown(_this.param.today[1]) < _this.$utils.countDown((_this.param
                                        .minHouse - Math.round(res.Data.ProductBookSetting.LeadTime / 60))
                                    .toString() + ':' + (res.Data.ProductBookSetting.LeadTime % 60).toString())
                            )) { // 入住时间不是今天,为12点往前推提前时间,最早可办理入住时间
                            _this.param.minHouse = _this.param.minHouse - Math.round(res.Data.ProductBookSetting
                                .LeadTime / 60)
                            _this.param.minMinute = (res.Data.ProductBookSetting.LeadTime % 60).toString()
                        } else {
                            // 预定当天且不超过12点且现在大于可以办理入住时间
                            if (_this.$utils.countDown(_this.param.today[1]) < _this.$utils.countDown(
                                    '12:00:00') && _this.$utils.countDown(_this.param.today[1]) > _this.$utils
                                .countDown((_this.param.minHouse - Math.round(res.Data.ProductBookSetting
                                    .LeadTime / 60)).toString() + ':' + (res.Data.ProductBookSetting
                                    .LeadTime % 60).toString())) {
                                _this.param.minHouse = _this.param.today[1].split(':')[0]
                                _this.param.minMinute = _this.param.today[1].split(':')[1]
                            }
                            // 预定当天且超过12点办理入住时间当下时间到23:59:59
                            if (_this.$utils.countDown(_this.param.today[1]) > _this.$utils.countDown(
                                    '12:00:00')) {
                                _this.param.minHouse = _this.param.today[1].split(':')[0]
                                _this.param.minMinute = _this.param.today[1].split(':')[1]
                            }
                        }
												_this.AddTempCar()
                        _this.BookInfoTypesList.map(function(item, index) { // 入住信息需填和必填筛选数组
                            res.Data.ProductBookSetting.BookInfoTypes.split(",").map(function(item2,
                                index2) {
                                if (item.ID == item2) {
                                    item.isShow = true
                                    if (item.isShow) {
                                        res.Data.ProductBookSetting.BookInfoRequiredTypes.split(
                                            ",").map(function(item2, index2) {
                                            if (item.ID == item2) {
                                                item.required = true
                                            }
                                        })
                                    }
                                }
                            })
                        })
                        _this.obj = _this.BookInfoTypesList.reduce((result, item) => { // 入住信息需填和必填筛选对象页面判断
                            return {
                                ...result,
                                [item.type]: item
                            }
                        }, {})
                        console.log(this.param.bookStartTime1)
                        if (_this.param.orderId != '') {
                            // 获取入住信息
                            _this.GetOrderBookInfo()
                        } else {
                            // 获取可预约房间列表
                            _this.GetCanBookRoomList()
                        }
                    }
                })
            },
            // 再次预定或者续单获取预约订单信息
            GetOrderBookInfo() {
                GetOrderBookInfo(this.param.orderId).then(res => {
                    if (res.State) {
                        this.rzInfo = res.Data
                        this.param.userName = res.Data.UserName
                        this.param.userIdentityCard = res.Data.UserIdentityCard
                        this.param.userTel = res.Data.UserTel
                        this.param.userCount = res.Data.UserCount
                        this.param.orderRemark = res.Data.OrderUserRemark
                        // 续单
                        if (this.param.type == 1) {
                            this.minDate = new Date(res.Data.BookEndTime.split(' ')[0])
                            // 续单入住为离店时间
                            this.selectDate([new Date(new Date(res.Data.BookEndTime.split(' ')[0]).getTime()),new Date(new Date(this.$utils.getNewData(res.Data.BookEndTime.split(' ')[0],1)).getTime())])
                            this.$refs.calendar.reset([new Date(new Date(res.Data.BookEndTime.split(' ')[0]).getTime()),new Date(new Date(this.$utils.getNewData(res.Data.BookEndTime.split(' ')[0],1)).getTime())])
                        }
                        // 再次预定
                        if (this.param.type == 0) {
                            this.GetCanBookRoomList()
                        }
                    }
                })
            },
            // 获取房间
            GetCanBookRoomList() {
                const _this = this

                GetCanBookRoomList({
                    productId: _this.param.productId,
                    storeId: _this.param.storeId,
                    startTime: _this.param.bookStartTime1 + ' 12:00:00',
                    endTime: _this.param.bookEndTime1 + ' 12:00:00',
                }).then(res => {
                    if (res.State) {
                        _this.ProductRoomList = res.Data
                        _this.param.estimateArrivalTime = ''
                        if (_this.param.orderId != '') {
                            let result = res.Data.some(ele => ele.ID === _this.rzInfo.RoomId) //true
                            if (result) {
                                // 续单或再次预定 房间号
                                _this.param.roomId = _this.rzInfo.RoomId
                                _this.param.roomNo = _this.rzInfo.RoomNo
                                _this.param.roomName = _this.rzInfo.RoomName
                                _this.ProductRoomList.map(function(item,index) {
                                    if (item.ID == _this.param.roomId) {
                                        item.flag = true
                                        _this.param.roomAll.push(item) // 计算房间数
                                    }
                                })
                                console.log(this.param.roomAll,'this.param.roomAll');
                                return
                            }
                            _this.$toast.fail('该房间已被预订,请选其它房间！')
                        }
                    }
                })
            },
            // 显示选择房间弹窗
            showHouse() {
                if (this.ProductRoomList.length == 0) {
                    this.$toast('该时间段暂无房间选择')
                    return
                }
                this.isShowHouse = true
            },
            // 选择房间
            roomChange(item) {
                const _this = this
                // 选择多间房间
                // this.ProductRoomList.map(function(item2,index2) {
                //     if (item2.BusinessId == item.BusinessId) {
                //         item2.flag = !item2.flag
                //         if (!item2.flag) {
                //             _this.param.roomAll.map(function(item3,index3) {
                //                 if (item3.BusinessId == item.BusinessId) {
                //                     _this.param.roomAll.splice(index3,1)
                //                 }
                //             })
                //             _this.param.roomId = -1
                //             _this.param.roomNo = ''
                //             _this.param.roomName = ''
                //         }else {
                //             _this.param.roomAll.push(item)
                //             _this.param.roomId = item.ID
                //             _this.param.roomNo = item.RoomNo
                //             _this.param.roomName = item.Name
                //         }
                //     }
                // })
                // _this.isShowHouse = false
                //  this.param.roomAll = []
                
                // 选择单间房间
                if (this.param.roomId != item.ID) {
                    this.ProductRoomList.map((item, index) => item.flag = false) // 重置
                    this.ProductRoomList.map(function(item2, index2) {
                        if (item2.ID == item.ID) {
                            item2.flag = true
                            _this.param.roomAll.push(item)
                        }
                    })
                    this.param.roomId = item.ID
                    this.param.roomNo = item.RoomNo
                    this.param.roomName = item.Name
                    this.isShowHouse = false
                }
            },
            // 显示日期弹窗
            showDate() {
                if (this.orderData.ProductBookSetting.SaleType == 0) {
                    this.isShowDate = true
                }
            },
            // 预约日期自定义
            formatter(day) {
                if (day.type === 'start') {
                    day.bottomInfo = '入住'
                } else if (day.type === 'end') {
                    day.bottomInfo = '离店'
                }
                return day
            },
            // 选中日期
            selectDate(date) {
                if (date.length == 2 && date[0] != null && date[1] != null) {
                    this.param.bookStartTime1 = this.$utils.dateFomat('yyyy-mm-dd', date[0])
                    this.param.startWeek = this.$utils.getCurrentweek(date[0])
                    this.param.bookEndTime1 = this.$utils.dateFomat('yyyy-mm-dd', date[1])
                    this.param.endWeek = this.$utils.getCurrentweek(date[1])
                    this.param.roomPrice = parseFloat(this.orderData.ProductModel.ProductInfo.V_GradePrice * this.$utils
                        .getDays(this.param.bookStartTime1, this.param.bookEndTime1))
                    this.param.orderPrice = parseFloat(this.orderData.ProductModel.ProductInfo.V_GradePrice * this
                        .$utils.getDays(this.param.bookStartTime1, this.param.bookEndTime1))
                    this.GetCanBookRoomList()
                    // 判断预定到店时间(可以办理入住时间)最早可以是几时几分(非当天根据12点往前推提前时间;当天且当前时间小于可以办理入住时间)
                    // 预防已经选择了预计到店时间重新设置初始值
                    this.param.minHouse = '12'
                    this.param.minMinute = ''
                    this.param.today = this.$utils.dateFomat('yyyy-mm-dd HH:MM:SS', new Date()).split(' ')
                    if (this.param.today[0] != this.param.bookStartTime1 || (this.$utils.countDown(this
                                .param.today[1]) < this.$utils.countDown('12:00:00') && this.$utils
                            .countDown(this.param.today[1]) < this.$utils.countDown((this.param
                                    .minHouse - Math.round(this.orderData.ProductBookSetting.LeadTime / 60))
                                .toString() + ':' + (this.orderData.ProductBookSetting.LeadTime % 60).toString())
                        )) { // 入住时间不是今天,为12点往前推提前时间,最早可办理入住时间
                        this.param.minHouse = this.param.minHouse - Math.round(this.orderData.ProductBookSetting
                            .LeadTime / 60)
                        this.param.minMinute = (this.orderData.ProductBookSetting.LeadTime % 60).toString()
                    } else {
                        // 预定当天且不超过12点且现在大于可以办理入住时间
                        if (this.$utils.countDown(this.param.today[1]) < this.$utils.countDown(
                                '12:00:00') && this.$utils.countDown(this.param.today[1]) > this.$utils
                            .countDown((this.param.minHouse - Math.round(this.orderData.ProductBookSetting
                                .LeadTime / 60)).toString() + ':' + (this.orderData.ProductBookSetting
                                .LeadTime % 60).toString())) {
                            this.param.minHouse = this.param.today[1].split(':')[0]
                            this.param.minMinute = this.param.today[1].split(':')[1]
                        }
                        // 预定当天且超过12点办理入住时间当下时间到23:59:59
                        if (this.$utils.countDown(this.param.today[1]) > this.$utils.countDown(
                                '12:00:00')) {
                            this.param.minHouse = this.param.today[1].split(':')[0]
                            this.param.minMinute = this.param.today[1].split(':')[1]
                        }
                    }
                }
            },
            // 关闭日期弹窗
            resetDate() {
                this.isShowDate = false
								this.AddTempCar()
								this.noUseCoupon()
            },
						cancleDate() {
                this.isShowDate = false
            },
						//加购
						AddTempCar(){
							this.param.userCarListInput.list = []
							const _obj = {}
							_obj.ProductId = this.param.productId
							_obj.Amount = this.$utils.getDays(this.param.bookStartTime1, this.param.bookEndTime1)
							_obj.SkuId = this.orderData.ProductModel.ProductInfo.ProductSkuList[0].ID
							_obj.StoreId = this.param.storeId
							_obj.V_GradePrice = this.orderData.ProductModel.ProductInfo.V_GradePrice
							this.param.userCarListInput.list.push(_obj)
							if(_obj.Amount > 0){
								AddOrEditUserTempCarList({list:this.param.userCarListInput.list}).then(res => {
									if(res.Data){
										this.GetProductDataBySubmit()
									}
								})
							}
						},
						//获取临时购物车数据
						GetProductDataBySubmit(){
							const data = {}
							data.isTempCar =  true,
							GetProductDataBySubmit(data).then(res =>{
								if(res.Data.List && res.Data.List.length > 0){
									const list = res.Data.List
									if(list[0].CarList){
										this.serveList = list[0].CarList
									}
								}
								if(res.Data.CouponList && res.Data.CouponList.length > 0){
									this.userCouponList = res.Data.CouponList
									this.userCouponList.forEach((ele) => {
										ele.V_UseStartTime = this.$utils.getNewData(ele.V_UseStartTime,0)
										ele.V_UseEndTime = this.$utils.getNewData(ele.V_UseEndTime,0)
									})
									this.userCouponNum = res.Data.CouponList.length;
								}
							})			
						},
            // 当预计到店时间值变化时触发
            changeSelect(picker) {
                let startIndexes = picker.getIndexes()
                let startTime = picker.getValues()
                if (startIndexes[0] != 0) {
                    this.param.minMinute = ''
                } else {
                    this.param.minMinute = (this.orderData.ProductBookSetting.LeadTime % 60).toString()
                }
            },
            // 选中预计到店时间
            confirmTimeSelect(val) {
                this.param.estimateArrivalTime = val
                this.param.timeSelect = false
            },
            // 点击取消预计到店时间按钮时触发
            cancelTimeSelect() {
                this.param.timeSelect = false
            },
            // 提交订单
            submitOrder() {
                if (this.ProductRoomList.length == 0) {
                    this.$toast('该时间段暂无房间选择')
                    return
                }
                if (this.ProductRoomList.length != 0 && this.param.roomNo == '') {
                    this.$toast('请选择房间')
                    return
                }
                if (this.obj.userName.required && this.param.userName == '') {
                    this.$toast('请输入姓名')
                    return
                }
                if (this.obj.userIdentityCard.required && this.param.userIdentityCard == '') {
                    this.$toast('请输入身份证号')
                    return
                } else {
                    if (this.obj.userIdentityCard.required && (this.param.userIdentityCard.length < 18 || !(
                            /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.param
                                .userIdentityCard)))) {
                        this.$toast('请输入正确身份证号')
                        return
                    }
                }
                if (this.obj.userIdentityCard.userTel && this.param.userTel == '') {
                    this.$toast('请输入联系电话')
                    return
                } else {
                    if (this.param.userTel < 11 || !(/^1[23456789]\d{9}$/.test(this.param.userTel))) {
                        this.$toast('请输入正确联系电话')
                        return
                    }
                }
                if (this.obj.userCount.required && this.param.userCount == '') {
                    this.$toast('请输入到店人数')
                    return
                }
                if (this.obj.estimateArrivalTime.required && this.param.estimateArrivalTime == '') {
                    this.$toast('请输入预计到店时间')
                    return
                }
                if (this.obj.orderRemark.required && this.param.orderRemark == '') {
                    this.$toast('请输入备注')
                    return
                }
                this.param.bookStartTime = this.param.bookStartTime1 + ' 12:00:00'
                this.param.bookEndTime = this.param.bookEndTime1 + ' 12:00:00'
								this.param.orderPrice = this.orderPrice
								if(this.orderPrice < 0){
									this.$toast('订单金额需大于等于0')
								}else{
									SubmitBookOrder(this.param).then(res => {
										if (res.Data) {
											if(res.Data.PriceSum === 0){
												this.$router.push({
													path:'roomOrderList',
													query:{
														saleType: 0
													}
												})
											}else{
												if(this.param.SaleType === 0){
													window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data
															.OrderId + '&&singleflag=1&&isBookOrder=1'
												}else{
													window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data
															.OrderId + '&&singleflag=1&&isBookOrder=2'
												}
											}
										}
									})
								}
            },
            // 数据整理
            dataChange(options = {}) {
                let keys = Object.keys(options)
                let str = ''
                keys.map((item, index) => {
                    str += `${index == 0 ? '' : '&'}${item}=${options[item]}`
                })
                return str
            },

						// 选择优惠券
					openCouponList() {
						this.showCoupon = true
						this.focusStatus = false
						if (this.price === '') {
							Toast({
								message: '请先输入订单金额'
							})
							this.focusStatus = true
							return
						} 
					},
					goCoupon(){
						this.showCoupon = true
					},
					
					// 不使用优惠券
					noUseCoupon() {
						this.userCouponListRadio = 0
						this.minOrderPrice = 0
						this.changeListRadio = 0
						this.CouponPrivilegeValue = 0
						this.couponValue = 0
						this.param.CouponDetailId = 0
						this.param.CouponId = 0
						this.showCoupon = false
					},
					// 确定选择优惠券
					choseCoupon() {
						this.showCoupon = false
						const list = this.active ? this.changeList : this.userCouponList
						const radio = this.active ? this.changeListRadio : this.userCouponListRadio
						if (radio >= 0) {
							console.log(radio)
							if (list[radio].V_PrivilegeWay === 0) {
								this.CouponPrivilegeValue = ((1 - list[radio].CouponPrivilegeValue / 100) * this.price).toFixed(2)
							} else {
								this.CouponPrivilegeValue = list[radio].CouponPrivilegeValue
							}

							this.couponValue = this.CouponPrivilegeValue
							if(list[radio].V_PrivilegeWay === 4 && list[radio].CouponPrivilegeValue > this.param.roomPrice){
								this.couponValue = this.param.roomPrice
							}
							this.minOrderPrice = list[radio].V_OrderPrice || 0
							this.param.CouponDetailId = list[radio].DetailId
							this.param.CouponId = list[radio].ID
						}
					},
        }
    }
</script>

<style lang="scss" scoped>
    .order-bg {
        height: 414px;
        background: linear-gradient(0, #f5f5f5 0%, rgba(22, 173, 86, 0) 100%);
        @include bg-primary;
    }

    .bb-l {
        border-bottom: 1px solid #f5f5f5;
    }

    .min-w {
        min-width: 194px;
    }

    .arrow:after {
        right: 11px;
        top: 39%;
        color: #CBCBCB;
    }

    .dvt {
        align-items: flex-end;
    }

    .line::before {
        content: '';
        width: 26px;
        height: 1px;
        position: absolute;
        left: -26px;
        top: 50%;
        transform: translateY(-50%);
        @include bg-primary;
    }

    .line::after {
        content: '';
        width: 26px;
        height: 1px;
        position: absolute;
        right: -26px;
        top: 50%;
        transform: translateY(-50%);
        @include bg-primary;
    }

    /deep/.van-cell {
        background-color: #F7F7F7;
    }

    .active {
        @include color-primary;
        background: rgba($color: $param15, $alpha: 0.1);
    }

    .bottom-box {
        position: relative;
        background: $colorF;
        height: 120px;
        z-index: 2;
        box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
    }

    .btn {
        width: 220px;
        padding: 0;
        line-height: 80px;
        border-radius: 40px;
        text-align: center;
    }

    /deep/.van-calendar__header-title {
        font-size: 16px;
        color: #323232;
    }

    /deep/.van-calendar__footer {
        padding: 0;
        box-shadow: 0px -1px 70px 0px rgba(0, 0, 0, 0.08);
    }

    /deep/.van-calendar__header {
        box-shadow: none;
    }

    /deep/.van-calendar__popup .van-popup__close-icon {
        display: none;
    }

    .tag::after {
        content: '';
        width: 1px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #999999;
    }

    .tag:last-child::after {
        width: 0;
    }

    /deep/.van-picker__cancel {
        @include color-primary;
    }

    /deep/.van-picker__confirm {
        @include color-primary;
    }
		.travel{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		/* 优惠券列表 */
		.coupon-list {
			position: relative;
			max-height: 55vh;
			overflow: scroll;
			.coupon-item {
				.item {
					width: 686px;
					height: 180px;
					background-size: 100% 100%;
					.left-box {
						width: 210px;
						height: 100%;
						color:#FDE8AE;
					}
				}
			}
		}
</style>
